<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/** @var $block \Magento\ConfigurableProduct\Block\Adminhtml\Product\Edit\Tab\Variations\Config\Matrix */
?>
<?php
$productMatrix = $block->getProductMatrix();
$attributes = $block->getProductAttributes();
$currencySymbol = $block->getCurrencySymbol();
?>

<div id="product-variations-matrix" data-role="product-variations-matrix">
    <div data-bind="scope: 'configurableVariations'">
        <h3 class="hidden" data-bind="css: {hidden: !showVariations() }" class="title">
            <?php /* @escapeNotVerified */ echo __('Current Variations'); ?>
        </h3>

        <script data-template-for="variation-image" type="text/x-magento-template">
            <img src="<%= data.url %>" class="variation" data-role="image"/>
        </script>
        <!-- ko if: showVariations() -->
            <div class="field hidden" data-bind="css: {hidden: !showVariations() }">
                <div data-role="configurable-attributes-container">
                    <!-- ko foreach: {data: attributes, as: 'attribute'} -->
                        <div data-role="attribute-info">
                            <input name="attributes[]" data-bind="value: attribute.id, attr:{id: 'configurable_attribute_' + attribute.id}" type="hidden"/>
                            <input data-bind="value: attribute.id, attr: {name: $parent.getAttributeRowName(attribute, 'attribute_id')}" type="hidden"/>
                            <input data-bind="value: attribute.code, attr: {name: $parent.getAttributeRowName(attribute, 'code')}" type="hidden"/>
                            <input data-bind="value: attribute.label, attr: {name: $parent.getAttributeRowName(attribute, 'label')}" type="hidden"/>
                            <input data-bind="value: $index(), attr: {name: $parent.getAttributeRowName(attribute, 'position')}" type="hidden"/>
                            <!-- ko foreach: {data: attribute.chosen, as: 'option'} -->
                                <div data-role="option-info">
                                    <input value="1" data-bind="attr: {name: $parents[1].getOptionRowName(attribute, option, 'include')}" type="hidden"/>
                                    <input data-bind="value: option.value, attr: {name: $parents[1].getOptionRowName(attribute, option, 'value_index')}" type="hidden"/>
                                </div>
                            <!-- /ko -->
                        </div>
                    <!-- /ko -->
                </div>
                <div class="admin__data-grid-wrap admin__data-grid-wrap-static">
                    <table class="data-grid">
                        <thead>
                            <tr>
                                <th class="data-grid-th data-grid-thumbnail-cell col-image" data-column="image">
                                    <?= /* @escapeNotVerified */  __('Image'); ?>
                                </th>
                                <th class="data-grid-th col-name" data-column="name">
                                    <?= /* @escapeNotVerified */  __('Name'); ?>
                                </th>
                                <th class="data-grid-th col-sku" data-column="sku">
                                    <?= /* @escapeNotVerified */  __('SKU'); ?>
                                </th>
                                <th class="data-grid-th col-price" data-column="price">
                                    <?= /* @escapeNotVerified */  __('Price'); ?>
                                </th>
                                <th class="data-grid-th col-qty" data-column="qty">
                                    <?= /* @escapeNotVerified */  __('Quantity'); ?>
                                </th>
                                <th class="data-grid-th col-weight" data-column="weight">
                                    <?= /* @escapeNotVerified */  __('Weight'); ?>
                                </th>
                                <!-- ko foreach: getAttributesOptions() -->
                                    <th data-bind="attr: {class:'data-grid-th col-' + $data.attribute_code},
                                        text: $data.attribute_label">
                                    </th>
                                <!-- /ko -->
                                <th class="data-grid-th">
                                    <?= /* @escapeNotVerified */  __('Actions'); ?>
                                </th>
                            </tr>
                        </thead>
                        <tbody data-bind="foreach: {data: productMatrix, as: 'variation'}">
                            <tr data-role="row" data-bind="css: { _disabled: !variation.status, even: $index() % 2 },
                                attr: { 'data-row-number': $index() }">
                                <td class="col-image" data-column="image">
                                    <div class="actions split actions-image-uploader">
                                        <div class="action-upload action split" data-action="upload-image">
                                            <!-- ko if: $parent.isShowPreviewImage(variation) -->
                                                <img data-bind='attr: {src: variation.images.preview}' class="variation"
                                                     data-role="image"/>
                                            <!-- /ko -->
                                            <!-- ko if: variation.editable-->
                                                <input type="hidden" data-bind="
                                                    attr: {id: $parent.getRowId(variation, 'image'),
                                                    name: $parent.getVariationRowName(variation, 'image')}"/>
                                                <span><?= /* @escapeNotVerified */  __('Upload Image'); ?></span>
                                                <input name="image" type="file"
                                                       data-url="<?= $block->escapeHtml($block->getImageUploadUrl()) ?>"
                                                       title="<?= $block->escapeHtml(__('Upload image')); ?>"/>
                                            <!-- /ko -->
                                        </div>
                                        <!-- ko if: variation.editable -->
                                            <!-- ko if: variation.images.file -->
                                                <span data-bind="html: $parent.generateImageGallery(variation)"
                                                      data-block="variation-images"></span>
                                            <!-- /ko -->
                                        <!-- /ko -->
                                        <button type="button" class="action toggle no-display" data-toggle="dropdown"
                                                data-mage-init='{"dropdown":{}}'>
                                            <span><?= /* @escapeNotVerified */  __('Select'); ?></span>
                                        </button>
                                        <ul class="dropdown">
                                            <li>
                                                <a class="item" data-action="no-image"><?= /* @escapeNotVerified */  __('No Image'); ?></a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                                <td class="col-name" data-column="name">
                                    <!-- ko ifnot: variation.editable -->
                                        <a target="_blank" data-bind="text: variation.name,
                                            attr: {href: variation.productUrl}">
                                        </a>
                                    <!-- /ko -->
                                    <!-- ko if: variation.editable -->
                                        <input type="text" class="required-entry" data-bind="
                                            attr: {id: $parent.getRowId(variation, 'name'),
                                            name: $parent.getVariationRowName(variation, 'name'),
                                             value: variation.sku}"/>
                                        <input type="hidden" data-bind="
                                            attr: {id: $parent.getRowId(variation, 'configurable_attribute'),
                                            name: $parent.getVariationRowName(variation, 'configurable_attribute'),
                                            value: variation.attribute}"/>
                                    <!-- /ko -->
                                    <input type="hidden" data-role="status" data-bind="
                                        attr: {name: $parent.getVariationRowName(variation, 'status'),
                                        value: variation.status}"/>
                                </td>
                                <td class="col-sku" data-column="sku">
                                    <!-- ko ifnot: variation.editable -->
                                        <!-- ko text: variation.sku --><!--/ko-->
                                    <!-- /ko -->
                                    <!-- ko if: variation.editable -->
                                        <input type="text" class="required-entry"
                                               data-bind="attr: {id: $parent.getRowId(variation, 'sku'),
                                                name: $parent.getVariationRowName(variation, 'sku'),
                                                value: variation.sku}"/>
                                    <!-- /ko -->
                                </td>
                                <td class="col-price" data-column="price">
                                    <!-- ko ifnot: variation.editable -->
                                        <!-- ko text: $parent.getCurrencySymbol() + variation.price --><!--/ko-->
                                    <!-- /ko -->
                                    <!-- ko if: variation.editable -->
                                        <div class="addon">
                                            <input type="text"
                                                   id=""
                                                   class="required-entry validate-zero-or-greater"
                                                   data-bind="attr: {id: $parent.getRowId(variation, 'price'),
                                                    name: $parent.getVariationRowName(variation, 'price'),
                                                     value: variation.price}"/>
                                            <label class="addafter"
                                                   data-bind="attr: {for: $parent.getRowId(variation, 'price')">
                                                <strong data-bind="text: $parent.getCurrencySymbol()"></strong>
                                            </label>
                                        </div>
                                    <!-- /ko -->
                                </td>
                                <td class="col-qty" data-column="qty">
                                    <!-- ko ifnot: variation.editable -->
                                        <!-- ko text: variation.quantity --><!--/ko-->
                                    <!-- /ko -->
                                    <!-- ko if: variation.editable -->
                                        <input type="text"
                                               class="validate-zero-or-greater"
                                               data-bind="attr: {id: $parent.getRowId(variation, 'qty'),
                                                name: $parent.getVariationRowName(variation, 'quantity_and_stock_status/qty'),
                                                value: variation.quantity}"/>
                                    <!-- /ko -->
                                </td>
                                <td class="col-weight" data-column="weight">
                                    <!-- ko ifnot: variation.editable -->
                                        <!-- ko text: variation.weight --><!--/ko-->
                                    <!-- /ko -->
                                    <!-- ko if: variation.editable -->
                                        <input type="text" class="validate-zero-or-greater"
                                               data-bind="
                                                   attr: {id: $parent.getRowId(variation, 'weight'),
                                                   name: $parent.getVariationRowName(variation, 'weight'),
                                                   value: variation.weight}"/>
                                    <!-- /ko -->
                                </td>
                                <!-- ko foreach: variation.options -->
                                <td data-bind="text: label"></td>
                                <!-- /ko -->
                                <td class="data-grid-actions-cell">
                                    <input type="hidden" name="associated_product_ids[]" data-bind="value: variation.productId" data-column="entity_id"/>
                                    <div class="action-select-wrap" data-bind="
                                            css : {
                                                '_active' : $parent.opened() === $index()
                                            },
                                            outerClick: $parent.closeList.bind($parent, $index)"
                                    >
                                        <button class="action-select" data-bind="click: $parent.toggleList.bind($parent, $index())">
                                            <span data-bind="i18n: 'Select'"></span>
                                        </button>
                                        <ul class="action-menu _active" data-bind="css: {'_active': $parent.opened() === $index()}">
                                            <li>
                                                <a class="action-menu-item"
                                                   data-bind="
                                                        attr: {'data-attributes': variation.attribute},
                                                        click: $parent.showGrid.bind($parent, $index())
                                                    "
                                                   data-action="choose"
                                                   href="#">
                                                    <?= /* @escapeNotVerified */  __('Choose a different Product');?>
                                                </a>
                                            </li>
                                            <li>
                                                <a class="action-menu-item" data-bind="
                                                    text: variation.status == 1 ? $t('Disable Product') : $t('Enable Product'),
                                                    click: $parent.toggleProduct.bind($parent, $index())">
                                                </a>
                                            </li>
                                            <li>
                                                <a class="action-menu-item" data-bind="click: $parent.removeProduct.bind($parent, $index())">
                                                    <?= /* @escapeNotVerified */  __('Remove Product');?>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        <!-- /ko -->
    </div>
    <div data-role="step-wizard-dialog"
         data-mage-init='{"Magento_Ui/js/modal/modal":{"type":"slide","title":"<?= /* @escapeNotVerified */  __('Create Product Configurations') ?>",
         "buttons":[]}}'
         class="no-display">
        <?php
        /* @escapeNotVerified */ echo $block->getVariationWizard([
            'attributes' => $attributes,
            'configurations' => $productMatrix
        ]);
        ?>
    </div>
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "configurableVariations": {
                        "component": "Magento_ConfigurableProduct/js/variations/variations",
                        "variations": <?= /* @noEscape */ $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($productMatrix) ?>,
                        "productAttributes": <?= /* @noEscape */ $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($attributes) ?>,
                        "productUrl": "<?= /* @noEscape */ $block->getUrl('catalog/product/edit', ['id' => '%id%']) ?>",
                        "currencySymbol": "<?= /* @noEscape */ $currencySymbol ?>",
                        "configurableProductGrid": "configurableProductGrid"
                    }
                }
            }
        }
    }
</script>
<script>
    require(['jquery'], function ($) {
        $('body').trigger('contentUpdated');
        $('[data-panel=product-variations]').applyBindings();
    })
</script>
